import Taro from '@tarojs/taro'
import { View, Form, Image } from '@tarojs/components'

import FormGroup from '../../components/formGroup'

import './index.less'

class AuthName extends Taro.Component {
  state = {
    form: {
      fullname: '',
      idcard: ''
    }
  }

  sow = () => {
    Taro.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
      }
    })
  }

  // 双向绑定数据
	handleInput = (key, e) => {
		const value = e.target.value

		this.setState({
			form: {
				...this.state.form,
				[key]: value
			}
		})
	}

	// 清除输入框
	handleClear = key => {
		this.setState({
			form: {
				...this.state.form,
				[key]: ''
			}
		})
  }
  
  // 提交
	handleSubmit = e => {
    Taro.showModal({
      content: '身份证信息一旦上传不可修改',
      success: function (res) {
        if (res.confirm) {
          Taro.navigateTo({
          	url: '/pages/login/authBankCard'
          })
        }
      }
    })
	}

  render() {
    const { form } = this.state

    return (
      <View className="auth-wrap">
        <View className="title">
          <View>实名认证</View>
          <View>涉及款项结算，请填写真实有效的身份证信息</View>
        </View>
        <Form onSubmit={ this.handleSubmit }>
					<FormGroup
            label="姓名"
            type="text"
						value={ form.fullname }
						placeholder="请输入姓名"
						input={ this.handleInput.bind(this, 'fullname') }
						clear={ this.handleClear.bind(this, 'fullname') }
					/>
          <FormGroup
            label="身份证号码"
            type="idcard"
						value={ form.idcard }
						placeholder="请输入身份证号码"
						input={ this.handleInput.bind(this, 'idcard') }
						clear={ this.handleClear.bind(this, 'idcard') }
					/>
          <View className="idcard">
            <Text>上传身份证照片</Text>
            <View className="card">
              <View className="camera" onClick={this.sow}>
                <Image src={ require('../../assets/images/camera.png') } />
                <Text>上传身份证正面</Text>
              </View>
              <View className="camera" onClick={this.sow}>
                <Image src={ require('../../assets/images/camera.png') } />
                <Text>上传身份证反面</Text>
              </View>
            </View>
          </View>
          <View className="next">
						<Button
							hoverClass="btn-active"
							formType="submit"
							// disabled={ this.isPhone(form.phone) && form.code ? false : true }
						>下一步</Button>
					</View>
				</Form>
      </View>
    )
  }
}

export default AuthName